<template>
  <div ref="myDataChart" class="chart" />
</template>

<script>
// 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
import * as echarts from 'echarts/core'
// 引入柱状图图表，图表后缀都为 Chart
import { LineChart, BarChart } from 'echarts/charts'
// 引入标题，提示框，直角坐标系，数据集，内置数据转换器组件，组件后缀都为 Component
import {
  TitleComponent,
  TooltipComponent,
  GridComponent,
  DatasetComponent,
  TransformComponent
} from 'echarts/components'
// 标签自动布局、全局过渡动画等特性
import { LabelLayout, UniversalTransition } from 'echarts/features'
// 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
import { CanvasRenderer } from 'echarts/renderers'
export default {
  name: 'LineChartComponent',
  props: {
    chartData: {
      type: Object,
      default: () => {}
    },
    isRefuel: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      myChart: null
    }
  },
  mounted() {
    this.initChart()
  },
  methods: {
    initChart() {
      // 注册必须的组件
      echarts.use([
        TitleComponent,
        TooltipComponent,
        GridComponent,
        DatasetComponent,
        TransformComponent,
        LineChart,
        BarChart,
        LabelLayout,
        UniversalTransition,
        CanvasRenderer
      ])
      // 基于准备好的dom，初始化echarts实例
      this.myChart = echarts.init(this.$refs.myDataChart)
      this.myChart.setOption(this.getOption())
    },
    getOption() {
      let xAxisData = []
      const data1 = { name: '发油车数', type: 'bar', yAxisIndex: 1, barWidth: '20%', areaStyle: {}, data: [] }
      const data2 = {
        name: '发油车吨数',
        type: 'line',
        data: []
      }
      const data3 = { name: '加油架次', type: 'bar', yAxisIndex: 1, barWidth: '20%', areaStyle: {}, data: [] }
      const data4 = { name: '加油量', type: 'line', data: [] }
      let series = []
      this.chartData.distributeOilTruckCount.forEach((item, index) => {
        if (index !== 0) {
          xAxisData.push(item.time)
          data1.data.push(Number(item.count))
        }
      })
      // data1.data = [
      //   111, 222, 232, 333, 555, 444, 777, 111, 222, 232, 333, 555, 444, 777
      // ]
      this.chartData.distributeOilTruckTon.forEach((item, index) => {
        if (index !== 0) {
          xAxisData.push(item.time)
          data2.data.push(Number(item.count))
        }
      })
      // data2.data = [
      //   50, 22, 555, 666, 748, 484, 999, 777, 555, 444, 666, 222, 555, 111
      // ]
      this.chartData.gatherOilTruckCount.forEach((item, index) => {
        if (index !== 0) {
          xAxisData.push(item.time)
          data3.data.push(Number(item.count))
        }
      })
      // data3.data = [
      //   222, 232, 333, 555, 222, 777, 111, 222, 232, 333, 555, 444, 888, 222
      // ]
      this.chartData.gatherOilTruckTon.forEach((item, index) => {
        if (index !== 0) {
          xAxisData.push(item.time)
          data4.data.push(Number(item.count))
        }
      })
      // data4.data = [
      //   232, 333, 555, 444, 777, 111, 222, 232, 333, 555, 444, 777, 111, 222
      // ]

      xAxisData = Array.from(new Set(xAxisData))
      // console.log(xAxisData)
      // series = [data1, data2, data3, data4];
      // console.log(3434343, this.isRefuel)
      if (!this.isRefuel) {
        series = [data1, data2]
      } else {
        series = [data3, data4]
      }

      const option = {
        // color: this.isRefuel ? ['#ff7070', '#fedb5f'] : ['#5c7bd9', '#91cc75'],
        tooltip: {
          trigger: 'axis'
        },
        grid: {
          left: '1%',
          right: '3%',
          bottom: '4%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: true,
          data: xAxisData
        },
        yAxis: [
          {
            type: 'value',
            name: this.isRefuel ? '加油量' : '发油车吨数',
            postion: 'left',
            splitLine: {
              show: false
            }
          },
          {
            type: 'value',
            name: this.isRefuel ? '加油架次' : '发油车数',
            postion: 'right',
            splitLine: {
              show: false
            }
          }
        ],
        series: series
      }
      return option
    }
  }
}
</script>

<style lang="scss" scoped>
.chart {
  width: 100%;
  height: 200px;
}
</style>
